<template>
  <el-dialog title="分配权限" :visible="showDialog" @close="close">
    <el-tree ref="tree" check-strictly default-expand-all node-key="id" :props="{label:'title'}" show-checkbox :data="treeData" />
    <template #footer>
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getPermissionsList } from '@/api/permissions'
import { everyRoles, editRoles } from '@/api/roles'
import { listToTree } from '@/utils/index'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      treeData: [],
      premIdList: {
        permissions: [], // 保存给角色分配权限id
        curId: '' // 角色id
      }
    }
  },
  methods: {
    // 更新角色分配权限
    async submit() {
      // 获取选中的复选框保存到变量当中
      this.premIdList.permissions = this.$refs.tree.getCheckedKeys()
      const res = await editRoles(this.premIdList)
      console.log(res)
      //   提示
      this.$message.success('分配权限成功')
      //   关闭框
      this.close()
    },
    close() {
      // 关闭
      this.$emit('update:showDialog', false)
    },
    // 获取列表的数据回显
    async getprems(id) {
      const res = await everyRoles(id)
      //   把数据保存到变量
      this.premIdList = res.data

      //   树形结构实现数据回显
      let arr = []
      const newArr = this.premIdList.permissions.map(item => {
        arr = item.id
        return arr
      })
      this.$refs.tree.setCheckedKeys(newArr)
      // 变为树形结构
      const reslose = await getPermissionsList({
        _limit: 999,
        _start: 1
      })
      this.treeData = reslose.data
      this.treeData = listToTree(this.treeData, 0)
    }

  }

}
</script>

<style>

</style>
